<template>
	<view class="home-container">
		<!-- 骨架屏 -->
		<view class="skeleton" v-if="loading">
			<!-- 头部搜索骨架 -->
			<view class="header-skeleton">
				<view class="logo-skeleton"></view>
				<view class="search-skeleton"></view>
			</view>
			<!-- 轮播图骨架 -->
			<view class="swiper-skeleton"></view>
			<!-- 九宫格骨架 -->
			<view class="grid-skeleton">
				<view class="grid-item-skeleton" v-for="i in 4" :key="i">
					<view class="grid-icon-skeleton"></view>
					<view class="grid-text-skeleton"></view>
				</view>
			</view>
			<!-- 推荐商品骨架 -->
			<view class="recommend-skeleton">
				<view class="title-skeleton"></view>
				<view class="goods-list-skeleton">
					<view class="goods-item-skeleton" v-for="i in 4" :key="i">
						<view class="goods-img-skeleton"></view>
						<view class="goods-info-skeleton">
							<view class="goods-title-skeleton"></view>
							<view class="goods-price-skeleton"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 实际内容 -->
		<template v-else>
			<!-- 原有内容 -->
			<view class="header">
				<!-- <image class="logo" src="/static/logo.png" mode="heightFix" /> -->
				<view class="search-wrapper">
					<uni-search-bar placeholder="搜索商品名称" @focus="goToSearch" cancelButton="none" radius="5" />
				</view>
			</view>
			<!-- 轮播图 -->
			<swiper class="my-swipe" :autoplay="true" :interval="3000" :circular="true" :indicator-dots="true"
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
				<swiper-item v-for="item in lunboData" :key="item.img">
					<image :src="item.img" />
				</swiper-item>
			</swiper>
			<!-- 9宫格 -->
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item>
					<view class="grid-item-box">
						<image src="/static_package/images/menu10.png" mode="widthFix" class="grid-icon" />
						<text class="text">数码电器</text>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="navigateTo('/pages/newslist/newslist')">
					<view class="grid-item-box">
						<image src="/static_package/images/menu19.png" mode="widthFix" class="grid-icon" />
						<text class="text">俏货资讯</text>
					</view>
				</uni-grid-item>
				<uni-grid-item @tap="goToCategory">
					<view class="grid-item-box">
						<image src="/static_package/images/menu17.png" mode="widthFix" class="grid-icon" />
						<text class="text">分类商品</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<image src="/static/images/more.png" mode="widthFix" class="grid-icon" />
						<text class="text">查看更多</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- 推荐商品 -->
			<view class="recommend-section">
				<view class="section-title">
					<text class="title-text">为你推荐</text>
				</view>
				<view class="recommend-content">
					<!-- 商品列表 -->
					<view class="goodslist">
						<view class="item" v-for="item in recommendGoods" :key="item.id" @tap="goToDetail(item.id)">
							<image :src="item.img_url" mode="widthFix" lazy-load />
							<view class="text">
								<view class="title overflow-ellipsis">
									{{ item.title }}
								</view>
								<view class="footer">
									<text class="price">¥{{ item.sell_price }}</text>
									<text class="buy">{{ item.buy }}人购买</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {
	onLoad,
	onReachBottom,
} from '@dcloudio/uni-app';
import {
	reqGetLunbo,
	reqRecommendGoods
} from '@/api/index';

const isLoadDone = ref(false);
const lunboData = ref([]);
const recommendGoods = ref([]);
const page = ref(1);
const loading = ref(true);

onLoad(() => {
	initData();
});

// 初始化数据
const initData = async () => {
	try {
		loading.value = true;
		await Promise.all([getLunboData(), getRecommendGoods()]);
	} catch (error) {
		console.error('初始化数据失败:', error);
	} finally {
		// 延迟关闭骨架屏，让用户感知到加载过程
		setTimeout(() => {
			loading.value = false;
		}, 500);
	}
};

// 监听页面触底事件
onReachBottom(() => {
	if (isLoadDone.value) {
		// 已经加载完毕了，不再往下加载
		return;
	}
	page.value++;
	getRecommendGoods();
});

const getRecommendGoods = async () => {
	try {
		const res = await reqRecommendGoods(page.value);
		// console.log('获取推荐商品:', res);
		if (res && res.message) {
			// 如果是第一页，直接赋值，否则追加数据
			if (page.value === 1) {
				recommendGoods.value = res.message;
			} else {
				recommendGoods.value = [...recommendGoods.value, ...res.message];
			}
			// 判断是否还有更多数据
			if (res.message.length < 10) {
				// 假设每页10条数据
				isLoadDone.value = true;
			}
		}
	} catch (error) {
		console.error('获取推荐商品失败:', error);
	}
};

const getLunboData = async () => {
	try {
		const res = await reqGetLunbo();
		if (res && res.message) {
			lunboData.value = res.message;
		} else {
			uni.showToast({
				title: '获取数据失败',
				icon: 'none',
			});
		}
	} catch (error) {
		console.error('获取轮播图数据失败:', error);
		// 错误已经在request.js中处理，这里不需要重复显示提示
	}
};

const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search',
	});
};

const goToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/goods_package/goodsdetail/goodsdetail?id=${id}`,
	});
};

const goToCategory = () => {
	uni.switchTab({
		url: '/pages/category/category',
		fail: (err) => {
			console.error('跳转分类页面失败:', err);
			uni.showToast({
				title: '跳转失败，请重试',
				icon: 'none'
			});
		}
	});
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

.home-container {
	background: #f0eded;
	min-height: 100vh;
	box-sizing: border-box;

	// 骨架屏样式
	.skeleton {
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;

		[class*="-skeleton"] {
			background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
			background-size: 400% 100%;
			animation: skeleton-loading 1.4s ease infinite;
		}

		.header-skeleton {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}

		.logo-skeleton {
			width: px2rpx(40);
			height: px2rpx(40);
			background-color: #e0e0e0;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.search-skeleton {
			flex: 1;
			height: px2rpx(40);
			background-color: #e0e0e0;
			border-radius: 20rpx;
		}

		.swiper-skeleton {
			width: 100%;
			height: px2rpx(240);
			background-color: #e0e0e0;
			margin-top: 20rpx;
			border-radius: 12rpx;
		}

		.grid-skeleton {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;
			margin-top: 20rpx;
			padding: 0 20rpx;
		}

		.grid-item-skeleton {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: px2rpx(94);
			height: px2rpx(84);
		}

		.grid-icon-skeleton {
			width: 50%;
			height: px2rpx(40);
			background-color: #e0e0e0;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
		}

		.grid-text-skeleton {
			width: 80%;
			height: px2rpx(14);
			background-color: #e0e0e0;
			border-radius: 8rpx;
		}

		.recommend-skeleton {
			margin-top: 20rpx;
			padding: 20rpx 30rpx;

			.title-skeleton {
				position: relative;
				width: 80%;
				height: px2rpx(32);
				background-color: #e0e0e0;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}

			.goods-list-skeleton {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20rpx;
			}

			.goods-item-skeleton {
				display: flex;
				align-items: center;
				background-color: #f0f0f0;
				border-radius: 12rpx;
				overflow: hidden;
			}

			.goods-img-skeleton {
				width: px2rpx(100);
				height: px2rpx(100);
				background-color: #e0e0e0;
				margin-right: 20rpx;
			}

			.goods-info-skeleton {
				flex: 1;
				padding: 20rpx 0;
			}

			.goods-title-skeleton {
				width: 70%;
				height: px2rpx(28);
				background-color: #e0e0e0;
				border-radius: 8rpx;
				margin-bottom: 10rpx;
			}

			.goods-price-skeleton {
				width: 40%;
				height: px2rpx(24);
				background-color: #e0e0e0;
				border-radius: 8rpx;
			}
		}
	}

	// 头部搜索框
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: px2rpx(4);
		background-color: #fff;

		.search-wrapper {
			flex: 1;
		}
	}

	// 轮播图
	.my-swipe {
		width: px2rpx(375);
		height: px2rpx(240);

		:deep(image) {
			width: 100%;
			height: 100%;
		}
	}

	// 9宫格
	:deep(.uni-grid) {
		background: #fff;

		.grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: px2rpx(94);
			height: px2rpx(84);

			.grid-icon {
				width: 50%;
			}

			.text {
				font-size: px2rpx(14);
				color: #524949;
			}
		}
	}

	// 推荐商品
	.recommend-section {
		margin-top: 20rpx;

		.section-title {
			position: relative;
			padding: 20rpx 30rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			&::before,
			&::after {
				content: '';
				flex: 1;
				height: 2rpx;
				background: linear-gradient(to right, transparent, #e4e4e4);
				margin: 0 20rpx;
			}

			&::after {
				background: linear-gradient(to left, transparent, #e4e4e4);
			}

			.title-text {
				color: #333;
				font-size: 32rpx;
				font-weight: 500;
				white-space: nowrap;
			}
		}
	}

	// 商品列表
	.goodslist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		// #ifdef H5
		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media screen and (min-width: 1024px) {
			grid-template-columns: repeat(4, 1fr);
			max-width: 1200px;
			margin: 0 auto;
		}

		// #endif

		.item {
			background: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: transform 0.3s ease;

			&:hover {
				transform: translateY(-6rpx);
			}

			image {
				width: 100%;
				aspect-ratio: 1;
				object-fit: cover;
			}

			.text {
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					height: 2.8em;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.footer {
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-size: 32rpx;
						color: #f60;
						font-weight: bold;

						&::before {
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}

					.buy {
						font-size: 24rpx;
						color: #999;
						background: #f8f8f8;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
}
</style>